<template>
  <div class="login-container">
    <div class="login-logo"></div>
    <div class="login-header">
      <a
        :class="{ active: loginway === 'login' }"
        @click="changeLoginWay('login')"
        >&nbsp;&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;&nbsp;·</a
      >
      <a
        :class="{ active: loginway === 'register' }"
        @click="changeLoginWay('register')"
        >注册</a
      >
    </div>
    <div class="login-input" v-if="loginway === 'login'">
      <form
        class="form_login"
        action="http://localhost:5480/WebApp/login.php"
        method="post"
      >
        <div class="username">
          <span class="span1"><i class="fa fa-user"></i></span>
          <input
            type="text"
            name="register_name"
            placeholder="选一个昵称"
            class="span2"
            v-model="username"
          />
        </div>
        <div class="password">
          <span class="span1"><i class="fa fa-unlock-alt"></i></span>
          <input
            type="password"
            name="register_password"
            placeholder="密码"
            class="span2"
            v-model="password"
          />
        </div>
        <button class="login-btn btn" @click="verify"><span>登录</span></button>
        <div class="login-control" style="color:#555555;font-size:12px;">
          <span
            style="float:left"
            class="checkbox"
            :class="{ checked: checked === true }"
            @click="checked = !checked"
          >
            <input
              type="checkbox"
              style="position: absolute; opacity: 0;"
              checked="checked"
            />
            <ins class="check"></ins>
          </span>
          <span style="float:left">记住我</span>
          <span style="float:right"
            ><a href="#" style="color:#555555">忘记密码</a></span
          >
        </div>
      </form>
    </div>
    <div class="login-input" v-if="loginway === 'register'">
      <form
        class="form_register"
        method="post"
        action="http://localhost:5480/WebApp/register.php"
      >
        <div class="email">
          <span class="span1"><i class="fa fa-envelope-o"></i></span>
          <input
            type="text"
            name="email_adress"
            placeholder="你的邮件地址"
            class="span2"
          />
        </div>
        <div class="username">
          <span class="span1"><i class="fa fa-user"></i></span>
          <input
            type="text"
            name="sign_in[name]"
            placeholder="手机号码/电子邮件"
            class="span2"
          />
        </div>
        <div class="password">
          <span class="span1"><i class="fa fa-unlock-alt"></i></span>
          <input
            type="password"
            name="sign_in[password]"
            placeholder="密码"
            class="span2"
          />
        </div>
        <button class="register-btn btn" type="submit">
          <span>注册</span>
        </button>
        <p class="register_text">
          点击 “注册” 或下方社交登录按钮，即表示您同意并愿意遵守简书
          <a href="#">用户协议</a> 和 <a href="#">隐私政策</a> 。
        </p>
      </form>
    </div>
    <div class="login-way">
      <h5>您还可以通过以下方式登录</h5>
      <ul>
        <li class="qqicon"><i class="fa fa-qq"></i></li>
        <li class="weiboicon"><i class="fa fa-weibo"></i></li>
        <li class="wechaticon"><i class="fa fa-wechat"></i></li>
        <li class="googleicon"><i class="fa fa-google-plus"></i></li>
        <li class="githubicon"><i class="fa fa-github"></i></li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    let checked = "true";
    let username;
    let password;
    return { checked, username, password };
  },
  computed: mapState({
    loginway: state => state.login.loginway,
    user: state => state.login.user,
    login_success: state => state.app.login_success
  }),
  methods: {
    changeLoginWay(str) {
      this.$store.dispatch("changeLoginWay", str);
    },
    verify() {
      if (this.username === user.name && this.password === user.password) {
        login_success = "true";
      } else {
        alert("password or username is not correct,please try again!");
      }
    }
  }
};
</script>
<style scoped>
form {
  width: 300px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(113, 113, 113, 0.17);
}
.form_login {
  height: 245px;
}
.form_register {
  height: 300px;
}
.login-container {
  width: calc(100% + 200px);
  padding: 125px 0 50px;
  text-align: center;
}
.login-logo {
  width: 252px;
  height: 123px;
  margin: 0 auto;
  background: url("../assets/img/jianshu_logo.jpg") no-repeat;
  background-size: 100%;
}
.login-header {
  font-size: 17.5px;
  margin: 70px 0 40px 0;
}
.login-header:before {
  position: relative;
  display: inline-block;
  top: -6px;
  content: "";
  height: 1px;
  width: calc(50% - 200px);
  background-color: rgba(113, 113, 113, 0.17);
}
.login-header:after {
  position: relative;
  top: -6px;
  display: inline-block;
  content: "";
  height: 1px;
  width: calc(50% - 200px);
  background-color: rgba(113, 113, 113, 0.17);
}
.login-header a {
  color: #b1b1b1;
}
.span1 {
  display: inline-block;
  width: 34px;
  height: 34px;
  font-size: 12px;
  font-weight: normal;
  padding: 4px 5px;
  margin: 1px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  line-height: 34px;
}
.span2 {
  width: 246px;
  height: 44px;
  position: relative;
  right: 6px;
  padding: 4px 12px;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 0;
  transition: border linear 0.2s;
  box-sizing: border-box;
}
.span2:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
}
.username,
.password {
  width: 300px;
  height: 44px;
  margin: 0 auto;
}
.username {
  margin-bottom: 15px;
}
.login-input .btn {
  margin: 30px auto 15px auto;
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.login-btn {
  background-color: #049cdb;
}
.register-btn {
  background-color: #90df66;
}
.login-input .btn span {
  font-size: 18px;
  color: #ffffff;
}
.checkbox {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  background: url("../assets/img/checkbox.jpg") no-repeat;
  background-position: -40px 0;
  border: none;
  cursor: pointer;
}
.login-control .checked {
  background-position: -20px 0;
}
.check {
  position: absolute;
  top: 0%;
  left: 0%;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  border: 0px;
  opacity: 0;
  background: rgb(255, 255, 255);
}
.login-way h5 {
  margin: 20px 0;
  font-weight: normal;
  color: #b1b1b1;
}
.login-way li {
  display: inline-block;
  margin: 0 5px;
  width: 40px;
  height: 40px;
  text-align: center;
  background-color: #b1b1b1;
  border-radius: 50%;
}
.login-way .wechaticon:hover {
  background-color: #49be38;
}
.login-way .qqicon:hover {
  background-color: #50bcf2;
}
.login-way .googleicon:hover {
  background-color: #f7566a;
}
.login-way .weiboicon:hover {
  background-color: #f6774f;
}
.login-way .githubicon:hover {
  background-color: #494d4f;
}
.login-way li:hover i {
  color: #ffffff;
}
.login-way i {
  line-height: 40px;
  font-size: 25px;
}
.login-header .active {
  cursor: pointer;
  color: #000000;
}
.active:hover {
  cursor: pointer;
}
.email {
  margin-bottom: 15px;
}
.register_text {
  font-size: 12px;
  color: #9d9d9d;
}
.register_text a {
  color: #000000;
  font-weight: bold;
}
</style>
